<template>
  <div>
    <wxc-mask height="500"
              width="600"
              duration="200"
              mask-bg-color="#FFFFFF"
              border-radius="20"
              :has-animation="true"
              :has-overlay="true"
              :show-close="true"
              :show="maskShow"
              @wxcMaskSetHidden="maskSetHidden">
      <div class="activity-panel">
        <div class="activity-panel-heading">
          <text class="activity-panel-title">亲，您选好了么？</text>
        </div>
        <div class="activity-panel-body">
          <div class="activity-panel-text-wrapper">
            <text class="activity-panel-text">{{checkText}}</text>
          </div>
        </div>
        <div class="activity-panel-btns" v-if="checkSuccess">
          <text class="btn btn-md btn-md-radius activity-panel-btn btn-default" @click="maskSetHidden()">我再挑挑</text>
          <div style="width: 50;"></div>
          <text class="btn btn-md btn-md-radius activity-panel-btn btn-primary" @click="okClick()">确认抢单</text>
        </div>
        <div class="activity-panel-btns" v-if="!checkSuccess">
          <text class="btn btn-md btn-md-radius activity-panel-btn btn-primary" @click="gotoBuy()">已领取免单，还未购买，现在去购买</text>
        </div>
        <div class="activity-panel-footer">
          <text class="help-text" @click="helpClick()">查看详细规则&gt;&gt;</text>
        </div>
      </div>
    </wxc-mask>
    <wxc-loading :show="loadingShow"></wxc-loading>
  </div>
</template>
<style lang="scss">
  @import "../sass/var";
  @import "../sass/activeable";
  @import "../sass/mixin";
  @import "../sass/buttons";

  .help-text {
    font-size: 26px;
    color: $color-info;
    margin-top: 40px;
  }
  .activity-panel {
    &-heading {
      height: 100px;
      @include border-bottom(1px, solid, #ddd);
      background-color: #fdfdfd;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
    &-body {
      justify-content: center;
      align-items: center;
    }
    &-btns {
      flex-direction: row;
      padding: 0 50px;
      justify-content: space-between;
    }
    &-btn {
      flex: 1;
    }
    &-footer {
      align-items: center;
    }
    &-title {
      font-size: 32px;
      color: $color;
      line-height: 50px;
    }
    &-text {
      &-wrapper {
        height: 200px;
        padding: 0 40px;
        align-items: center;
        justify-content: center;
      }
      font-size: 32px;
      color: $color-warning;
      line-height: 36px;
      font-weight: 200;
    }
    &-btn-main {
      height: 70px;
      line-height: 70px;
      border-radius: 70px;
      font-size: 32px;
      flex: 1;
      width: 480px;
    }
    &-others {
      flex-direction: row;
      justify-content: space-between;
      padding: 20px 30px 0 ;
      &-btn {
        flex: 1;
        text-align: center;
        height: 100px;
        align-items: center;
        justify-content: center;
        &-text {
          font-size: 26px;
          color: $color-muted;
        }
        &-icon {
          width: 50px;
          height: 50px;
        }
      }
    }
  }

</style>
<script>

import {WxcEpSlider, WxcMask, WxcLoading} from 'weex-ui'
let api = require('../include/api')
let navigator = require('../include/xnavigator')
module.exports = {
  props: {},
  components: {
    WxcEpSlider, WxcMask, WxcLoading
  },
  data () {
    return {
      height: weex.config.env.deviceHeight * 750 / weex.config.env.deviceWidth,
      containerTop: 0,
      maskShow: false,
      loadingShow: false,
      checkSuccess: true,
      checkText: '每个抢单时段的所有商品只能免单一个，确认抢购当前商品吗？',
      flashSaleItemId: 0,
      helperUrl: '',
      itemId: 0
    }
  },

  created () {
  },
  methods: {
    maskHidden () {
      this.maskShow = false
    },
    show (flashSaleItemId, callback) {
      this.callback = callback
      this.flashSaleItemId = flashSaleItemId
      this.loadingShow = true
      api.flashSaleItem.checkDraw({id: this.flashSaleItemId}).done(rs => {
        let data = rs.data
        this.helperUrl = data.helperUrl
        this.maskShow = true
        this.checkSuccess = !data.userHasDrawn
        this.itemId = data.itemId
      }).always(() => {
        this.loadingShow = false
      })
    },
    maskSetHidden () {
      this.maskShow = false
    },
    helpClick () {
      navigator.push({
        url: 'webpage.js?url=' + encodeURIComponent(this.helperUrl) + '&title=' + encodeURIComponent('免单教程')
      })
    },
    gotoBuy () {
      this.maskSetHidden()
      navigator.push('commission-item.js?id=' + this.itemId)
    },
    okClick () {
      this.loadingShow = true
      api.flashSaleItem.draw({id: this.flashSaleItemId}).done(rs => {
        this.checkSuccess = !rs.data
        this.callback && this.callback(rs.data)
      }).always(() => {
        this.loadingShow = false
      })
    }
  }
}
</script>
